<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>马尼拉 1.0</title>
		<script src="./js/jquery-1.10.2.js"></script>
		<script src="./js/postbirdAlertBox.min.js"></script>
		<link rel="stylesheet" href="./css/main.css">
		<link rel="stylesheet" href="./css/postbirdAlertBox.css">

		<link rel="stylesheet" href="./css/label.css" media="all">
		<style type="text/css">

			body { 
				/*box-sizing: border-box;*/
				margin: 0;
				padding: 0;
				background: url('img/bg.png') repeat;
			}
			/* 骰子 */
			.point{
				width: 276px; 
				height: 135px; 
				margin: 120px auto 30px auto; 
				position: absolute;
				left: 3%;
				top: 450px;
				display:none;
			}
			.dice1{
				width: 90px; 
				height: 90px; 
				background: url(img/dice.png) no-repeat; 
				cursor: pointer;
				float: left;
				border: 1px solid #000;
			}
			.dice2{
				width: 90px; 
				height: 90px; 
				background: url(img/dice.png) no-repeat; 
				cursor: pointer;
				float: left;
				border: 1px solid #000;
			}
			.dice3{
				width: 90px; 
				height: 90px; 
				background: url(img/dice.png) no-repeat; 
				cursor: pointer;
				float: left;
				border: 1px solid #000;
			}

			.pcolor{
				width: 90px; 
				height: 30px; 
				cursor: pointer;
				float: left;
				border: 1px solid #000;
			}
			.dice_1{
				background-position:-5px -4px
			}
			.dice_2{
				background-position:-5px -107px
			}
			.dice_3{
				background-position:-5px -212px
			}
			.dice_4{
				background-position:-5px -317px
			}
			.dice_5{
				background-position:-5px -427px
			}
			.dice_6{
				background-position:-5px -535px
			}
			.dice_t{
				background-position:-5px -651px
			}
			.dice_s{
				background-position:-5px -763px
			}
			.dice_e{
				background-position:-5px -876px
			}
			p#result{
				text-align:center; font-size:16px
			}
			p#result span{
				font-weight:bold; color:#f30; 
				margin:6px
			}

			/* 骰子 END*/
			
		</style>
		
		<script type="text/javascript">

			// $(function(){
			// 	var point = $(".point");
			// 	point.click(function(){
				
			// 		ws.send('{"type":"playPoint","num":"3"}');
					
			// 	});
			// });

			function playPoint(pointArr){
				if(pointArr[1]){
					var a = '#dice1';
					var c = 'dice1';
					var n = pointArr[1];
					getPoint(a,c,n);
				}
				
				if(pointArr[2]){
					var a = '#dice2';
					var c = 'dice2';
					var n = pointArr[2];
					getPoint(a,c,n);
				}
				
				if(pointArr[3]){
					var a = '#dice3';
					var c = 'dice3';
					var n = pointArr[3];
					getPoint(a,c,n);
				}
			}
			
			function getPoint(a,c,num){
				//var c = '#'+ a;
				var b = $(a);
				
				b.attr("class",c);//清除上次动画后的点数
				//dice1.css('cursor','default');
				//var num = Math.floor(Math.random()*6+1);//产生随机数1-6
				b.animate({left: '+2px'}, 100,function(){
					b.addClass("dice_t");
				}).delay(200).animate({top:'-2px'},100,function(){
					b.removeClass("dice_t").addClass("dice_s");
				}).delay(200).animate({opacity: 'show'},600,function(){
					b.removeClass("dice_s").addClass("dice_e");
				}).delay(100).animate({left:'-2px',top:'2px'},100,function(){
					b.removeClass("dice_e").addClass("dice_"+num);
					//dice1.css('cursor','pointer');
				});

			}


	</script>
	</head>
	<body onload="showPrompt();">
		<script src="./js/main.js"></script>
		<script type="text/javascript">
			var uid;
			var captain = 0;
			var my_turn;
			var shipStep=new Array();
			shipStep[1]= 0;
			shipStep[2]= 0;
			shipStep[3]= 0;
			var portShips = 0;
			var repairShips = 0;
			var nowShip = 0;
			var manila = {
				// 父容器
				box: null,//document.getElementById('box'),
				// 游戏面板，数组 对应 div
				board: null,
				boardDiv: null,
				//webSocket
				ws:{},
				// 初始化
				init: function() {
					this.webSocket();
					this.createBox();
				},
				 // 连接服务端
				webSocket: function() {
				   // 创建websocket
				   ws = new WebSocket("ws://192.168.1.10:7272");
				   // 当socket连接打开时，输入用户名
				   ws.onopen = onopen;
				   // 当有消息时根据消息类型显示不同信息
				   ws.onmessage = onmessage; 
				   ws.onclose = function() {
					  console.log("连接关闭，定时重连");
				   };
				   ws.onerror = function() {
					  console.log("出现错误");
				   };
				},
				
				// 创建容器
				createBox: function() {
					var str = '';
					/* 主面板 */
					this.box = document.createElement('div');
					this.box.id = 'box';
					
					//this.board = new Array(20);
					for (var i = 0; i < 2; i++) {
						//this.board[i] = new Array(4);
						for (var j = 0; j < 10; j++) {
							//this.board[i][j] = 0;
							str += '<div class="div1" style="left:' + j*120 + 'px;top:' + i*60 + 'px"></div>';
						}
					}
					
					//this.board = new Array(20);
					for (var i = 1; i < 4; i++) {
						//this.board[i] = new Array(4);
						for (var j = 0; j < 20; j++) {
							//this.board[i][j] = 0;
							str += '<div class="div2" style="left:' + j*60 + 'px;top:' + i*120 + 'px"></div>';
						}
					}

					//this.board = new Array(20);
					for (var i = 8; i < 10; i++) {
						//this.board[i] = new Array(4);
						for (var j = 0; j < 10; j++) {
							//this.board[i][j] = 0;
							str += '<div class="div1" style="left:' + j*120 + 'px;top:' + i*60 + 'px"></div>';
						}
					}
					str += 	'<div class="confirm" id="confirm"><a class="btn btn-primary" href="javascript:confirmShipOutset();">确认轮船起点</a></div>';
					str += 	'<div class="confirm" id="giveUpSetWorker"><a class="btn btn-primary" href="javascript:setWorkerGiveUp();">放弃放置工人</a></div>';
					str += 	'<div class="confirm" id="pirateGiveUp"><a class="btn btn-primary" href="javascript:pirateGiveUp(2);">放弃登船</a></div>';
					str += 	'<div class="gotoPort" id="gotoPort"><a class="btn btn-primary" href="javascript:pirateChoose(1);">进港</a></div>';
					str += 	'<div class="gotoRepair" id="gotoRepair"><a class="btn btn-primary" href="javascript:pirateChoose(2);">进修理厂</a></div>';
					str += 	'<div class="msg" id="msg"></div>';
				// str += '<div class="ship" id="ship1">';
				// for (var j = 0; j < 4; j++) {
				// 	str += '<div class="shipCell" style="left:' + j*60 + 'px;top:' + 0 + 'px"></div>';
				// }
				// str += '</div>';
				// str += '<div class="ship" id="ship2">';
				// for (var j = 0; j < 4; j++) {
				// 	str += '<div class="shipCell" style="left:' + j*60 + 'px;top:' + 0 + 'px"></div>';
				// }
				// str += '</div>';
				// str += '<div class="ship" id="ship3">';
				// for (var j = 0; j < 4; j++) {
				// 	str += '<div class="shipCell" style="left:' + j*60 + 'px;top:' + 0 + 'px"></div>';
				// }
				// str += '</div>';
					this.box.innerHTML = str;
					document.body.appendChild(this.box);
					this.boardDiv = document.querySelectorAll('#box > div');
					
					/* 股票面板 */
					var str = '';
					this.box = document.createElement('div');
					this.box.id = 'list';
					//this.board = new Array(6);
					for (var i = 0; i < 6; i++) {
						//this.board[i] = new Array(4);
						for (var j = 0; j < 4; j++) {
							//this.board[i][j] = 0;
							str += '<div class="div3" style="left:' + j*50 + 'px;top:' + i*50 + 'px"></div>';
						}
					}
					this.box.innerHTML = str;
					document.body.appendChild(this.box);
					
					
					/* 我的股票 */
					/*
					var str = '';
					this.box = document.createElement('div');
					this.box.id = 'stock';
					for (var j = 0; j < 5; j++) {
						str += '<div class="myStock" style="left:' + j*50 + 'px;top:' + 0 + 'px"></div>';
					}
					this.box.innerHTML = str;
					document.body.appendChild(this.box);
					*/
					/* 玩家列表 */
					var str = '';
					this.box = document.createElement('div');
					this.box.id = 'player';
					this.box.innerHTML = str;
					document.body.appendChild(this.box);
					
					var str = '';
					
					for(var i = 0; i <=5; i++){
						str += '<div class="user" id="user' + i +'"><div class="username" id="username'+ i +'"></div> <div class="userpanel" id="userpanel'+ i +'"></div></div>';
					}

					$('#player').html(str);
	
					
					$(".point").css('display','block'); 


					/* 叫地主提示板 */
					var str = '';
					this.box = document.createElement('div');
					this.box.id = 'price';
					this.box.innerHTML = str;
					document.body.appendChild(this.box);

					var str = '';
					/* 主面板 */
					this.box = document.createElement('div');
					this.box.id = 'buystock';
					for (var j = 0; j < 5; j++) {
						str += '<div class="buyCell" onclick="buystock('+ j +')" style="left:' + j*60 + 'px;top:' + 0 + 'px"></div>';
					}
					this.box.innerHTML = str;
					document.body.appendChild(this.box);
					document.querySelectorAll('#buystock > div')[1].style.background = 'blue';
					document.querySelectorAll('#buystock > div')[2].style.background = 'yellow';
					document.querySelectorAll('#buystock > div')[3].style.background = 'green';
					document.querySelectorAll('#buystock > div')[4].style.background = 'red';

				},

			}
			
			// 连接建立时发送登录信息
			function onopen()
			{
				// 登录
				var login_data = '{"type":"login","room_id":"2","uid":"'+ uid +'"}';
				//var login_data = '{"type":"logintest","room_id":2}';
				console.log("websocket握手成功，发送登录数据:"+login_data);
				ws.send(login_data);
			}
			
			
			// 服务端发来消息处理
			function onmessage(e)
			{
				console.log(e.data);
				var data = eval("("+e.data+")");
				switch(data['type']){
					// 服务端ping客户端
					case 'ping':
						ws.send('{"type":"pong"}');
						break;
					//登录
					case 'login':
						console.log(data['client_name']+"登录成功");
						if(data['my_id']){
							my_turn = data['my_turn'];
							if(my_turn == 0){
								document.getElementById('switch').innerHTML = '<a class="btn btn-primary" href="javascript:start();">开始</a>';
							}
							ws.send('{"type":"map"}');
						}
						break;
					// 同步地图信息
					case 'map':
						var client_list = data['clients_list'];
						getPlayerList(client_list);
						
						break;
					// 股票信息
					case 'stockMsg':
						myStock(data['myStock']);
						break;
					// 玩家准备
					case 'ready':
						if(data['all_ready'] == 1){
							initNextGame();
						}

						break;
					// 叫地主
					case 'callCaptain':
						var now_price = 0;
						if(data['price'] > 0){
							now_price = data['price'];
						}
						if(data['message'] == 'no_money'){
							alert('金币不足');
							callCaptain(now_price);
						}else if(data['message'] == 'money_not_enough'){
							alert('金额小于当前出价');
							callCaptain(now_price);
						}else{

							if(data['captain']){
								alert(data['captain']['uid']+ '成为队长');
								// var msg = data['captain']['uid'] + "成为队长";
								// showMsg(msg);
								$('#price').html('');
								$("#price").css('display','none');
								$("#user"+data['captain']['turn']).css('box-shadow', '0px 0px 5px 5px rgba(205, 241, 9, 0.6)');
								nowTurn(data['captain']['turn']);

								var msg = "队长购买股票";
								showMsg(msg);
								if(data['captain']['uid'] == uid){
									startBuyStock();
									captain = 1;
									//startChooseGoods(1);
								}else{
									//startChooseGoods(0);
								}
								
							}else{
								if(data['next_info']['next'] == my_turn){
									callCaptain(now_price);
								}
								if(!data['give_up'] && parseInt(now_price)>0){
									getCaptainMessage(now_price,data['highest']); // 显示最高报价
								}
								nowTurn(data['next_info']['next']);
							}
						}
						
						break;
					// 刷新金币
					case 'moneyRefresh':
						moneyRefresh(data['turn'],data['gold']);
						break;
					// 买股票
					case 'buystock':
						if(data['give_up']){
							// alert('队长放弃购买股票');
						}else{
							if(captain == 1){
								if(data['message'] == 'no_money'){
									alert('金币不够');
									break;
								}else if(data['message'] == 'sold_out'){
									alert('已售完');
									break;
								}
								myStock(data['my_stock']);
							}
						}
						if(captain == 1){
							endBuyStock();
							startChooseGoods(1);
						}else{
							startChooseGoods(0);
						}

						break;
					// 选货物
					case 'chooseGoods':
						choosed(data['goods_info']);
						if(data['finish']){ // 货物选择结束
							var msg = "队长设置货船起点";
							showMsg(msg);
							if(captain == 1){
								initShipOutset();
							}
						}
						break;
					// 设置轮船起点
					case 'setOutset':
						shipMove(data['ship_id'],data['step']);
						break;
					// 确认轮船起点
					case 'confirmOutset':

						if(data['message'] == 'not_nine'){
							alert('轮船起点数相加不等于9！！');
						}else{
							for(var i=1;i<=3;i++){
								shipMove(i,data['ship_step'][i]);
							}
							if(captain == 1){
								endShipOutset();

							}

							initGame(); // 开始游戏

						}

						break;
					// 上船
					case 'boarding':
						showBoarding(data);
						break;
					// 押港口或修理厂
					case 'port':
						showPort(data);
						break;
					// 领航员
					case 'pilot':
						showPilot(data);
						break;
					// 海盗
					case 'pirate':
						showPirate(data);
						break;
					// 保险
					case 'insurance':
						showInsurance(data);
						break;
					// 放弃放置工人
					case 'workerGiveUp':
						showWorkerGiveUp(data);
						break;
					// 掷骰子
					case 'playPoint':
						playPoint(data['point']);
						for(var i=1;i<=3;i++){
							shipMovePoint(i,data['point'][i]);
						}
						endPlayPoint();
						// 海盗回合
						if(data['pirate']){
							nowTurn(data['pirate']['turn']);
							if(my_turn == data['pirate']['turn']){
								startPirateBoarding();
							}
							var msg = "海盗行动";
							showMsg(msg);
						}

						if(data['result']){
							stockPriceChange(data['result']['stock_list']);
							var gList = data['result']['gold_list'];
							var end = data['result']['end'];
							console.log(end);
							if(end == 1){
								var msg = "本局结束";
								showMsg(msg);
								var list = data['result']['finally'];
								// openFinallyList(list);
								setTimeout(function(){openFinallyList(list);},5000);
							}else{
								setTimeout(function(){roundEndViews(gList);},5000);
							}
							
						}else{
							if(captain && !data['pirate']){
								$('#giveUpSetWorker').css('display','block');
							}
						}
						break;
					// 海盗登船
					case 'pirateBoarding':
						if(data['user_info']['uid'] == uid){
							endPirateBoarding();
						}
						showPirateBoarding(data);
						if(data['action'] == 'robbery'){
							if(data['user_info']['uid'] == uid){
								nowShip = data['ship_id'];
								startPirateChoose();
							}else{

							}
						}else{
							if(data['message'] == 'full'){
								alert('货船满员');
								break;
							}
							if(data['pirate'] == 1){ // 下回合还是海盗回合
								nowTurn(data['next']);
								if(my_turn == data['next']){
									startPirateBoarding();
								}
							}else{
								nowTurn(data['next'],1);
							}
						}
					
						break;
					// 海盗选择轮船是否进港
					case 'pirateChoose':
						endPirateChoose();
						if(data['action'] == 1){ // 进港
							shipMovePoint(data['ship_id'],1);
						}else if(data['action'] == 2){ // 进修理厂
							shipMoveIntoRepair(data['ship_id']);
						}

						

						if(data['pirate'] == 1){ // 下回合还是海盗回合
							nowTurn(data['next']);
							if(my_turn == data['next']){
								startPirateBoarding();
							}
						}else{
							nowTurn(data['next'],1);
						}

						if(data['result']){
							stockPriceChange(data['result']['stock_list']);
							var gList = data['result']['gold_list'];
							var end = data['result']['end'];
							console.log(end);
							if(end == 1){
								var msg = "本局结束";
								showMsg(msg);
								var list = data['result']['finally'];
								// openFinallyList(list);
								setTimeout(function(){openFinallyList(list);},5000);
							}else{
								setTimeout(function(){roundEndViews(gList);},5000);
							}
						}
						break;
					// 领航员行动
					case 'pilotChoose':

						shipMove(data['ship_id'],data['step']);
						
						if(data['finish']){
							var play = data['play'];
							var flag = 1;
							if(play == 1){
								flag = 0;
							}
							endPilotChoose(play);
							
							if(data['pilot'] == 1 && my_turn == data['next']){
								nowTurn(data['next']);
								startPilotChoose(2);
							}else{
								nowTurn(data['next'],flag);
							}
						}
						
						break;
					// 用户退出 更新用户列表
					case 'logout':
						//delete client_list[data['from_client_id']];
						//flush_client_list(data);	
				}
			}
			
		</script>

		<div class="pwindow">
	    <div class="point" id="point">
			<div id="dice1" class="dice1 dice_1"></div>
			<div id="dice2" class="dice2 dice_1"></div>
			<div id="dice3" class="dice3 dice_1"></div>					   		
			<div class="pcolor" id="p1"></div>
			<div class="pcolor" id="p2"></div>
			<div class="pcolor" id="p3"></div>
		</div>
		</div>
		<!-- <input type="button" onclick="tt()" value="start">  -->
		<div id="switch">
		<!-- <a class="btn btn-primary" href="javascript:start();">测试</a> -->
		</div>
		<div class="theme-popover">
		    <div class="theme-poptit">
			   <span class="label" style=" font-size: 16px;">金币结算</span>
		       <a href="javascript:closeGoldList();" title="关闭" class="close">×</a>
		    </div>

			
			<div class="goldList" id="goldList" style=" font-size: 20px;">
				<center>
					<table id="goldTable" style="text-align:center;"> 
						
					</table>
				</center>
		 	</div>
				
		</div>

		<div class="theme-popover-finally">
		     <div class="theme-poptit">
			    <span class="label" style=" font-size: 16px;">本局结算</span>
		        <a href="javascript:closeFinallyList();" title="关闭" class="close">×</a>
		     </div>
			<div class="finallyList" id="finallyList" style=" font-size: 20px;">
				<center>
					<table id="finallyTable" style="text-align:center;"> 
						 
					</table>
				</center>
			 </div>
		</div>
			 
		<div class="theme-popover-mask"></div>


	</body>
</html>
